<template>
  <el-card>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="名称">{{ enterprise.name }}</el-descriptions-item>
      <el-descriptions-item label="统一社会信用代码">{{ enterprise.unifiedSocialCreditCode }}</el-descriptions-item>
      <el-descriptions-item label="电子邮件地址">{{ enterprise.email }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ enterprise.phone }}</el-descriptions-item>
      <el-descriptions-item label="邮政编码">{{ enterprise.EMSCode }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ enterprise.address }}</el-descriptions-item>
      <el-descriptions-item label="所属行业">{{ enterprise.industryAffiliation }}</el-descriptions-item>
      <el-descriptions-item label="企业类型">{{ enterprise.enterpriseType }}</el-descriptions-item>
      <el-descriptions-item label="成立时间">{{ enterprise.createdDate }}</el-descriptions-item>
      <el-descriptions-item label="企业联系人">{{ enterprise.contactPerson }}</el-descriptions-item>
      <el-descriptions-item label="企业详情" span="2">{{ enterprise.description }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-button @click="editInfoDialog=true">修改</el-button>
  <el-button @click="updatePasswordDialog=true">修改密码</el-button>
  <el-dialog v-model="editInfoDialog" title="修改企业信息">
    <el-form label-width="120px">
      <el-form-item label="电子邮件">
        <el-input v-model="enterprise.email"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="enterprise.phone"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="enterprise.contactPerson"></el-input>
      </el-form-item>
      <el-form-item label="企业详情">
        <el-input v-model="enterprise.description" type="textarea"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="editInfo(enterprise)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="updatePasswordDialog" title="修改密码">
    <el-form v-model="updatePasswordForm" label-width="120px">
      <el-form-item label="旧密码">
        <el-input v-model="updatePasswordForm.oldPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="updatePasswordForm.newPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码">
        <el-input v-model="updatePasswordForm.reNewPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancelUpdatePassword">取消</el-button>
        <el-button type="primary" @click="updatePassword(updatePasswordForm)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import type {
  EnterpriseInterface,
  ResponseInterface,
  UpdateEnterpriseInfoInterface,
  UpdatePasswordInterface
} from "@/model/type";
import {updateEnterpriseInfoAPI, updateEnterprisePasswordAPI} from "@/api/UserAPI";
import {ElMessage} from "element-plus";

const enterprise = reactive<EnterpriseInterface>(JSON.parse(localStorage.getItem("user") || "{}"))
const updatePasswordForm = reactive<UpdatePasswordInterface>({
  newPassword: "",
  oldPassword: "",
  reNewPassword: "",
  userType: "enterprise"
})
const editInfoDialog = ref<boolean>(false)
const updatePasswordDialog = ref<boolean>(false)

function cancelEdit() {
  Object.assign(enterprise, JSON.parse(localStorage.getItem("user") || "{}"))
  editInfoDialog.value = false
}

function cancelUpdatePassword() {
  Object.assign(updatePasswordForm, {
    newPassword: "",
    oldPassword: "",
    reNewPassword: "",
    userType: "enterprise"
  })
  updatePasswordDialog.value = false
}

async function editInfo(enterprise: EnterpriseInterface) {
  console.log(enterprise)
  const editEnterpriseInfo: UpdateEnterpriseInfoInterface = {
    id: enterprise.id,
    email: enterprise.email,
    phone: enterprise.phone,
    contactPerson: enterprise.contactPerson,
    description: enterprise.description
  }
  console.log(editEnterpriseInfo)
  const r: ResponseInterface = await updateEnterpriseInfoAPI(editEnterpriseInfo, localStorage.getItem("token") || "")
  if (r.code === 200) {
    localStorage.setItem("user", JSON.stringify(enterprise))
    ElMessage.success("修改成功")
    editInfoDialog.value = false
  }
}

async function updatePassword(form: UpdatePasswordInterface) {
  if (form.newPassword != form.reNewPassword) {
    ElMessage.error("两次密码不一致")
    return
  }
  const r: ResponseInterface = await updateEnterprisePasswordAPI(form, localStorage.getItem("token") || "")
  if (r.code === 200) {
    ElMessage.success("修改成功")
    cancelUpdatePassword()
  }
}
</script>

<style scoped>

</style>